<template>
  <div class="contentCate">
    <el-card class="card" v-show="status === 'index'">
      <div class="filter">
        <div class="select">
          <i
            class="el-icon-upload"
            style="
                height: 80px;
                line-height: 80px;
                width: 80px;
                margin: 0 auto;
                border: 1px dashed #409eff;
                text-align: center;
                font-size: 30px;
                color: #409eff;
                cursor: pointer;
              "
            @click="openUpload"
          ></i>
          <el-divider>分组</el-divider>
          <div>
            <div
              v-for="item in selectArr"
              :key="item.id"
              class="item"
              @click="changeActive(item.id)"
              :class="active == item.id ? 'active' : ''"
            >
              {{ item.title }}
            </div>
          </div>
        </div>

        <div class="box" v-loading="div_loading">
          <el-image
            :src="item.url"
            v-for="item in data.data"
            :key="item.id"
            style="
                width: 100px;
                height: 100px;
                margin: 10px;
                border-radius: 5px;
                background: #f1f1f1;
              "
            @contextmenu.prevent="copy(item.url)"
            :preview-src-list="images"
            fit="contain"
          ></el-image>
        </div>
      </div>

      <el-pagination
        background
        style="text-align: center; margin: 20px 0"
        :current-page="searchParams.page"
        :page-sizes="pageSizes"
        layout="total,prev, pager, next,sizes"
        :total="data.total"
        @size-change="changeSize"
        @current-change="changePage"
      ></el-pagination>
    </el-card>
    <el-dialog title="上传图片" :visible.sync="uploadStatus">
      <el-form ref="form" label-width="120px">
        <el-form-item label="类型" prop="status">
          <el-select
            v-model="uploadParams.format"
            placeholder="请选择类型"
            clearable
            style="width: 180px"
            filterable
            @change="changeFormat"
          >
            <el-option
              v-for="item in formatArr"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            accept="image/jpeg,image/png,image/jpg"
            :on-success="uploadFileSuccess"
            :before-upload="beforeUpload"
            :on-error="errorUpload"
            :action="uploadUrl"
            multiple
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import api from "../../api/api.js";
export default {
  name: "contentCate",
  data() {
    return {
      status: "index", // 页面控制
      data: [], // 表格
      table_loading: true, // 表格加载中
      loading: false, //全局加载中
      pageSizes: [50, 100, 200, 500, 800, 1000, 2000], // 每页条数默认10
      searchParams: {
        // 搜索参数
        page: 1,
        limit: 50,
        format: ""
      },
      selectArr: [
        { id: "", title: "全部" },
        { id: 1, title: "商品图" },
        { id: 2, title: "商品详情图" },
        { id: 3, title: "banner" },
        { id: 4, title: "活动" },
        { id: 5, title: "盲盒" }
      ],
      formatArr: [
        { id: 1, title: "商品图" },
        { id: 2, title: "商品详情图" },
        { id: 3, title: "banner" },
        { id: 4, title: "活动" },
        { id: 5, title: "盲盒" }
      ],
      uploadUrl: "/admin/common/upload", // 上传地址
      // uploadUrl: "https://testyuemeiapi.pinboss.net/api/resource/upload", // 上传地址
      uploadStatus: false,
      uploadParams: {
        format: 1
      },
      images: [],
      active: ""
    };
  },
  created() {
    this.getData();
  },

  methods: {
    // 加载中
    load() {
      this.loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    changeFormat(format) {
      this.uploadUrl = "/admin/common/upload";
      this.uploadUrl = this.uploadUrl + "?format=" + format;
    },
    rightClick() {
      alert(1);
    },
    openUpload() {
      this.uploadStatus = true;
    },
    beforeUpload() {
      this.load();
    },
    errorUpload() {
      this.unload();
    },
    uploadFileSuccess(res, file) {
      this.unload();
      this.uploadStatus = false;
      this.$message.success("上传成功");
      this.getData();
    },
    // 取消加载
    unload() {
      this.loading.close();
    },
    copy(content) {
      if (window.clipboardData) {
        window.clipboardData.setData("text", content);
      } else {
        (function(content) {
          //oncopy 事件在用户拷贝元素上的内容时触发。
          document.oncopy = function(e) {
            e.clipboardData.setData("text", content);
            e.preventDefault(); //取消事件的默认动作
            document.oncopy = null;
          };
        })(content);
        document.execCommand("Copy");
      }
      this.$message.success("地址复制成功");
    },
    changeActive(id) {
      if (this.active != id) {
        this.active = id;
        this.searchParams.format = id;
        this.search();
      }
    },
    // 获取所有数据
    getData() {
      this.div_loading = true;
      api.images
        .index({ params: this.searchParams })
        .then(res => {
          this.div_loading = false;
          if (res.data.code == 200) {
            this.data = res.data.data;
            this.getImages();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    search() {
      this.load();
      api.images
        .index({ params: this.searchParams })
        .then(res => {
          this.unload();
          if (res.data.code == 200) {
            this.data = res.data.data;
            this.getImages();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 重置搜索参数重新搜索
    reset() {
      this.init();
      this.search();
    },
    getImages() {
      for (let i = 0; i < this.data.data.length; i++) {
        this.images.push(this.data.data[i]["url"]);
      }
    },
    // 初始化
    init() {
      this.searchParams.format = "";
      this.addStatus = false;
      this.editStatus = false;
    },
    // 改变每页条数时
    changeSize(limit) {
      this.searchParams.limit = limit;
      this.search();
    },
    // 改变当前页码时
    changePage(page) {
      this.searchParams.page = page;
      this.search();
    }
  }
};
</script>

<style scoped lang="less">
.contentCate {
  margin: 0 auto;
}
.filter {
  display: flex;
  justify-content: space-between;

  .select {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee;
    width: 150px;
    margin-right: 10px;
    padding-right: 10px;
    .item {
      width: 100%;
      margin-bottom: 5px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      border-radius: 5px;
      color: #409eff;
      &.active {
        background: #409eff;
        color: #fff;
      }
    }
  }
  .box {
    display: flex;
    flex-wrap: wrap;
    height: 600px;
    overflow: scroll;
    flex: 1;
  }
}
</style>
